

//定义导航模块
var Nav = React.createClass({
    //定义选中态
    getInitialState:function () {
        //默认选中起步页
        // console.log(this.props)
        var cls={};
        //到底显示哪个导航应该由父组件决定
        //就是父组件向子组件通信的过程
        cls[this.props.page]='choose';
        return {
            cls: cls
        }

    },
    //切换导航样式的方法
    toggleNav:function (e) {
        //第一种方式，绑定数据获取属性值
        // var id = e.target.getAttribute('data-id');
        // console.log(id);
        //第二种方式，传入自定义数据
        // console.log(e)
        // 用获取的id更新导航，就是更新状态数据
        var cls ={};
        cls[e]='choose';
        //更新状态
        this.setState({
            cls:cls
        })
        //更新父组件显示的内容，就是子组件向父组件通讯
        this.props.updateParentPage(e);

    },

    //渲染视图
    render:function () {
        //缓存类数据
        var cls = this.state.cls;
        // console.log(cls);
        return(
            <div className="header navbar navbar-static-top">
                <div className="container">
                    <div className="navbar-header">
                        <a data-id="home" onClick={this.toggleNav.bind(this,'home')} className="navbar-brand">Bootstrap</a>
                    </div>
                    <ul className="navbar-nav nav nav-pills pull-right">
                        <li>
                            <a>主题/模板</a>
                        </li>
                        <li>
                            <a>Bootstrap中文网</a>
                        </li>
                    </ul>
                    <ul className="navbar-nav nav nav-pills">
                        <li><a onClick={this.toggleNav.bind(this,'start')} className={cls.start}>起步</a></li>
                        <li><a onClick={this.toggleNav.bind(this,'css')} className={cls.css}>全局CSS样式</a></li>
                        <li><a onClick={this.toggleNav.bind(this,'component')} className={cls.component}>组件</a></li>
                        <li><a onClick={this.toggleNav.bind(this,'javascript')} className={cls.javascript}>JavaScript插件</a></li>
                        <li><a onClick={this.toggleNav.bind(this,'maker')} className={cls.maker}>定制</a></li>
                        <li><a>网站实例</a></li>
                    </ul>
                </div>
            </div>
        )
    }
})
module.exports = Nav;